.m-crop-image-canvas {
  position: fixed;
  top: 0;
  left: 100%;
  z-index: 900;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-animation: fadeInRight 0.3s linear both;
  -moz-animation: fadeInRight 0.3s linear both;
  animation: fadeInRight 0.3s linear both; }
  .m-crop-image-canvas.z-close {
    -webkit-animation: fadeOutRight 0.3s linear both;
    -moz-animation: fadeOutRight 0.3s linear both;
    animation: fadeOutRight 0.3s linear both; }
  .m-crop-image-canvas .head {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    text-align: center;
    font-size: 0; }
    .m-crop-image-canvas .head a {
      display: inline-block;
      width: 60px;
      height: 40px;
      margin: 0 20px;
      background: url("../images/crop_icons.png") no-repeat;
      background-size: 228px 20px;
      cursor: pointer;
      text-indent: -1000px;
      overflow: hidden; }
    .m-crop-image-canvas .head .zoom-in {
      background-position: 20px 10px; }
    .m-crop-image-canvas .head .zoom-out {
      background-position: -85px 10px; }
    .m-crop-image-canvas .head .rotate {
      background-position: -189px 10px; }
  .m-crop-image-canvas .panel {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow: hidden; }
    .m-crop-image-canvas .panel canvas {
      display: block;
      width: 100%;
      height: 100%;
      visibility: visible; }
  .m-crop-image-canvas .foot {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 36px;
    padding: 10px 0;
    text-align: center;
    font-size: 0;
    opacity: 0.8; }
    .m-crop-image-canvas .foot a {
      display: inline-block;
      width: 120px;
      height: 32px;
      margin: 0 5px;
      text-align: center;
      line-height: 32px;
      font-size: 14px;
      color: #fff;
      border: 1px solid #fff; }
    .m-crop-image-canvas .foot .done {
      color: #3f3f3f;
      background-color: #fff; }
  .m-crop-image-canvas .loading {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
    display: none;
    width: 100%;
    height: 100%; }
    .m-crop-image-canvas .loading .spinner {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 60px;
      margin-top: -30px;
      padding-left: 0;
      text-align: center;
      font-size: 0; }
      .m-crop-image-canvas .loading .spinner li {
        background-color: #fff;
        height: 100%;
        width: 6px;
        display: inline-block;
        margin: 0 2px;
        -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
        -moz-animation: stretchdelay 1.2s infinite ease-in-out;
        animation: stretchdelay 1.2s infinite ease-in-out; }
        .m-crop-image-canvas .loading .spinner li:nth-child(2) {
          -webkit-animation-delay: -1.1s;
          -moz-animation-delay: -1.1s;
          animation-delay: -1.1s; }
        .m-crop-image-canvas .loading .spinner li:nth-child(3) {
          -webkit-animation-delay: -1s;
          -moz-animation-delay: -1s;
          animation-delay: -1s; }
        .m-crop-image-canvas .loading .spinner li:nth-child(4) {
          -webkit-animation-delay: -0.9s;
          -moz-animation-delay: -0.9s;
          animation-delay: -0.9s; }
        .m-crop-image-canvas .loading .spinner li:nth-child(5) {
          -webkit-animation-delay: -0.8s;
          -moz-animation-delay: -0.8s;
          animation-delay: -0.8s; }

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 100%; }
  100% {
    opacity: 1;
    left: 0; } }

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 100%; }
  100% {
    opacity: 1;
    left: 0; } }

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    left: 0; }
  100% {
    opacity: 0;
    left: 100%; } }

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    left: 0; }
  100% {
    opacity: 0;
    left: 100%; } }

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
    -ms-transform: scaleY(0.4);
    transform: scaleY(0.4); }
  20% {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1); } }

@keyframes stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
    -ms-transform: scaleY(0.4);
    transform: scaleY(0.4); }
  20% {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1); } }
